<template>
	<view>
		<view class="status-bar">
			<!-- 非h5端状态栏占位 -->
		</view>

		<view class="top">
			<view class="head">
				<image src="../../static/菜单.png" mode="" @click="showDrawer"></image>

				<view class="tabs">
					<view v-for="(tab, index) in tabs" :key="index" @tap="currentTab(index)"
						:class="{ active: tabsId === index }" class="tab">{{ tab.title }}</view>
				</view>

				<image src="../../static/添加.png" mode="" @click="toUpload"></image>
			</view>

			<uni-drawer ref="showLeft" mode="left">
				<view style="padding:30rpx;">
					<!-- ... -->
				</view>
			</uni-drawer>

			<view class="center">
				<view class="search">
					<uni-easyinput prefixIcon="search" @click="toSearch"></uni-easyinput>
				</view>
			</view>
		</view>

		<view class="bottom">
			<swiper @change="currentComponent" :current="tabsId">
				<swiper-item>
					<Follow></Follow>
				</swiper-item>
				<swiper-item>
					<Find></Find>
				</swiper-item>
				<swiper-item>
					<Latest></Latest>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup>
	import Follow from '../../components/follow.vue';
	import Find from '../../components/find.vue';
	import Latest from '../../components/latest.vue'
	import {
		reactive,
		ref
	} from 'vue';

	import {
		onShow
	} from "@dcloudio/uni-app"

	const userInfoInit = {
		id: '',
		name: '',
		phone: '',
		password: '',
		follow: 0,
		fans: 0,
		image: '/image/default.jpg'
	}

	const userInfo = reactive({
		...userInfoInit
	});

	onShow(() => {
		const userData = uni.getStorageSync('userInfo')
		if (userData.id) {
			Object.assign(userInfo, userData);
		} else {
			Object.assign(userInfo, userInfoInit);
		}
	});

	const showLeft = ref(null)

	const showDrawer = () => {
		showLeft.value.open();
	}

	const tabs = [{
		title: '关注',
		index: 0
	}, {
		title: '发现',
		index: 1
	}, {
		title: '最新',
		index: 2
	}]

	const tabsId = ref(1);

	function toUpload() {
		if (userInfo.id) {
			uni.navigateTo({
				url: '/pages/upload/upload'
			});
		} else {
			uni.showToast({
				icon: 'none',
				title: '请先登录'
			})
		}

	}

	function toSearch() {
		uni.navigateTo({
			url: '/pages/search/search'
		});
	}

	const currentComponent = (e) => {
		tabsId.value = e.detail.current;
	};

	const currentTab = (index) => {
		tabsId.value = index;
	}
</script>

<style scoped>
	.status-bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top {
		height: 235rpx;
	}

	uni-swiper {
		height: calc(100vh - 400rpx);
	}

	.head {
		padding: 40rpx 25rpx 35rpx 25rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.head image {
		height: 40rpx;
		width: 40rpx;
	}

	.tabs {
		display: flex;
	}

	.tab {
		padding: 10rpx;
	}

	.active {
		color: #7e9de2;
	}

	.search {
		padding: 0 25rpx 25rpx 25rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.bottom {
		width: 100%;
		height: calc(100vh - 235rpx);
	}
</style>